<template>
  <div class="content">
    <!-- 基本信息 -->
    <div class="info-title">
      <div class="title">基本信息</div>
    </div>
    <!-- <div class="info-item">
      <label>头像：</label>
      <img :src="userInfo.avatar" alt="Avatar" class="avatar">
      <a href="#" class="edit-link">编辑</a>
    </div> -->
    
    <div class="info-item" style="margin-top: 10px;">
      <label>姓名：</label>
      <span>{{ userInfo.username }}</span>
    </div>
    <div class="info-item">
      <label>账户名：</label>
      <span>{{ userInfo.staffname }}</span>
    </div>
    <div class="info-item">
      <label>身份：</label>
      <el-tag  :type="getTagType(userInfo.rank.rankname)">
        {{ userInfo.rank.rankname }}
      </el-tag>
    </div>
    <div class="info-item">
      <label>所属公司：</label>
      <span>{{ userInfo.company }}</span>
    </div>
    <div class="info-item">
      <label>所属部门：</label>
      <span>{{ userInfo.department }}</span>
    </div>
    <div class="info-item">
      <label>职位：</label>
      <span>{{ userInfo.position }}</span>
    </div>

    <!-- 修改密码 -->
    <div class="change-password" v-if="showPasswordForm">
      <div class="info-title">
        <div class="title">修改密码</div>
      </div>
      <div class="password-form-container">
        <el-form :model="passwordForm" status-icon :rules="rules" ref="passwordFormRef" label-width="120px">
          <el-form-item label="输入旧密码：" prop="password">
            <el-input type="password" v-model="passwordForm.password" autocomplete="off" style="width: 35%;"></el-input>
          </el-form-item>
          <el-form-item label="输入新密码：" prop="newpassword">
            <el-input type="password" v-model="passwordForm.newpassword" autocomplete="off"
              style="width: 35%;"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="submitForm(passwordFormRef)">确认修改</el-button>
          </el-form-item>
        </el-form>
      </div>

    </div>
    <div v-else class="password-toggle" @click="showPasswordForm = true">
      点击修改密码
    </div>
  </div>
</template>
<script setup>
import { ElMessage } from 'element-plus';
import { showError, showSuccess, showConfirm, date } from '@/utils/plugs'
import { reactive, ref, onMounted, watch } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import api from '@/api/httpApi'
import { useUserStore } from '@/api/store'

const router = useRouter()
const route = useRoute()

const activeTab = ref('workspace')
const adminTabs = ref(false)
onMounted(() => {

  const firstSegment = route.path.split('/').filter(item => item)[0]
  if (firstSegment === 'userInfo') {
    adminTabs.value = true
  }
})
// 标签颜色映射
function getTagType(accountType) {
  switch (accountType) {
    case '成员':
      return 'info';
    case '超级管理员':
      return 'danger';
    case '管理员':
      return 'warning';
    default:
      return 'info';
  }
}
// 处理点击 tab 的方法
const handleTabClick = (tab) => {
  activeTab.value = tab.name
}

const userInfo = useUserStore().userInfo
// 密码验证规则
const validatePassword = (rule, value, callback) => {
  const regex = /^(?=.*[A-Za-z])(?=.*\d).{6,}$/
  if (!regex.test(value)) {
    callback(new Error('至少6位,包含字母和数字'))
  } else {
    callback()
  }
}
const passwordForm = reactive({
  password: '',
  newpassword: ''
});
const rules = reactive({
  password: [
    { required: true, message: '请输入旧密码', trigger: 'blur' }
  ],
  newpassword: [
    { required: true, message: '请输入新密码', trigger: 'blur' },
    { validator: validatePassword, trigger: 'blur' }
  ]
})

const passwordFormRef = ref();
const showPasswordForm = ref(false);
const submitForm = (formEl) => {
  if (!formEl) return;
  formEl.validate((valid) => {
    if (valid) {

      const data = {
        userid: useUserStore().userInfo.id,
        username: useUserStore().userInfo.username,
        password: passwordForm.password,
        newpassword: passwordForm.newpassword
      }
      api.updateUserPassword(data).then(() => {
        showSuccess('密码修改成功，请重新登录')

        // 清除用户信息缓存
        useUserStore().clearUserInfo() // 清除 Pinia 中的用户信息



        // 跳转到登录页
        router.push('/login')
      }).catch(() => {
        showError('密码修改失败！');
      });
      showPasswordForm.value = false; // 隐藏表单
    } else {
      showError('密码修改失败！');
      return false;
    }
  });
};
</script>
<style scoped>
.info-title {

  background: #F2F3F5;
  border-radius: 4px 4px 4px 4px;
}

.title {
  font-family: PingFang SC, PingFang SC;
  font-weight: 600;
  font-size: 16px;
  color: #303133;
  line-height: 20px;
  margin-left: 16px;
  padding: 2px 0;
}


.basic-info,
.change-password {
  margin-bottom: 20px;
}

.info-item {
  margin-bottom: 10px;
  font-family: PingFang SC, PingFang SC;
  font-weight: 400;
  font-size: 14px;
  color: #303133;
  margin-left: 16px;
}

.avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  vertical-align: middle;
}

.password-form-container {
  padding: 10px 0px;
}

.password-toggle {
  margin-left: 16px;
  cursor: pointer;
  color: #409eff;
  font-size: 14px;
}
</style>
